<template>
  <div class="brand-list-page xtx-wrapper">
    <div class="container">
      <xtx-bread>品牌列表</xtx-bread>
      <!-- 筛选区域 -->
      <div class="xtx-filter">
        <div class="item">
          <div class="head">分类：</div>
          <div class="body">
            <a class="active" href="javascript:;">全部</a>
            <a href="javascript:;">美食</a>
            <a href="javascript:;">餐厨</a>
            <a href="javascript:;">洗护</a>
            <a href="javascript:;">居家</a>
            <a href="javascript:;">电器</a>
            <a href="javascript:;">服饰</a>
          </div>
        </div>
        <div class="item">
          <div class="head">产地：</div>
          <div class="body">
            <a class="active" href="javascript:;">全部</a>
            <a href="javascript:;">中国</a>
            <a href="javascript:;">美国</a>
            <a href="javascript:;">英国</a>
            <a href="javascript:;">韩国</a>
            <a href="javascript:;">希腊</a>
            <a href="javascript:;">南非</a>
            <a href="javascript:;">巴西</a>
            <a href="javascript:;">香港</a>
          </div>
        </div>
        <div class="item">
          <div class="head">字母：</div>
          <div class="body word">
            <a class="active" href="javascript:;">全部</a>
            <a href="javascript:;">#</a>
            <a href="javascript:;">A</a>
            <a href="javascript:;">B</a>
            <a href="javascript:;">C</a>
            <a href="javascript:;">D</a>
            <a href="javascript:;">E</a>
            <a href="javascript:;">F</a>
            <a href="javascript:;">H</a>
            <a href="javascript:;">I</a>
            <a href="javascript:;">J</a>
            <a href="javascript:;">K</a>
            <a href="javascript:;">L</a>
            <a href="javascript:;">M</a>
            <a href="javascript:;">N</a>
            <a href="javascript:;">O</a>
            <a href="javascript:;">P</a>
            <a href="javascript:;">Q</a>
            <a href="javascript:;">R</a>
            <a href="javascript:;">S</a>
            <a href="javascript:;">T</a>
            <a href="javascript:;">U</a>
            <a href="javascript:;">V</a>
            <a href="javascript:;">W</a>
            <a href="javascript:;">X</a>
            <a href="javascript:;">Y</a>
            <a href="javascript:;">Z</a>
          </div>
        </div>
      </div>
      <!-- 结果区域 -->
      <div class="brand-list">
        <h4>#</h4>
        <ul>
          <li v-for="i in 4" :key="i" @click="$router.push('/brand/'+i)">
            <div class="brand-item" :style="{ backgroundImage: `url(${img})` }">
              <div class="box">
                <div class="head">
                  <i class="iconfont icon-dingwei"></i>
                  <span>德国</span>
                </div>
                <div class="body">
                  <img :src="img2" alt="" />
                </div>
                <p class="name">特伦顿</p>
                <p class="desc">源于德国的世界知名奢侈品牌</p>
              </div>
            </div>
          </li>
        </ul>
        <h4>A</h4>
        <ul>
          <li v-for="i in 4" :key="i">
            <div class="brand-item" :style="{ backgroundImage: `url(${img3})` }">
              <div class="box">
                <div class="head">
                  <i class="iconfont icon-dingwei"></i>
                  <span>德国</span>
                </div>
                <div class="body">
                  <img :src="img4" alt="" />
                </div>
                <p class="name">特伦顿</p>
                <p class="desc">源于德国的世界知名奢侈品牌</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'brand-list-page',
  data () {
    return {
      categoryList: [],
      placeList: [],
      letterList: [],
      filterParams: {
        categoryId: null,
        placeId: null,
        letter: ''
      },
      brands: [{ letter: '#', data: [] }],
      img4: 'https://img10.360buyimg.com/seckillcms/s175x75_jfs/t1/140098/34/10906/4351/5f8965b0E32d63299/4861e97020a38325.png!cc_175x75.webp',
      img3: 'https://yanxuan.nosdn.127.net/e74ab7b97c66da8a8fed13916e10960b.jpg?type=webp&imageView&quality=95&thumbnail=535y315',
      img2: 'http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/center-brand-logo.png',
      img: 'https://yanxuan.nosdn.127.net/c48c8d79ff130bf482998c0989affa90.jpg?type=webp&imageView&quality=95&thumbnail=535y315'
    }
  }
}
</script>

<style scoped lang='less'>
@import './styles/list.less';
</style>
